<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <#include "/resources/share/common/_commresource.html"/> 
 	<!-- 不是全局通用的JS -->
	<script type="text/javascript" src="${contextPath}/resources/framework/summernote/my-summernote.min.js"></script>
    <title>随意论坛</title>
</head>

  <body>
    <#include "/resources/share/common/_commtop.html"/> 
<section class="content-wrap">
<div class="container">
<div class="row">
            
<main class="col-md-12 main-content">
<article class="post">
	<div class="template-page-wrapper">
	<form class="form-horizontal templatemo-signin-form" role="form" id="sectionform" action="${contextPath}/section/save" method="post" enctype="multipart/form-data">
		<!-- 隐藏属性start -->
		<input type="file" id="contextFile" onchange="readFile(this)" style="display: none"/>
		<input type="hidden" id="sectionImg" name="section_img" value="" /> 
		<input type="hidden" name="context" id="SummernoteCode"/>
		<!-- 隐藏属性end -->
		<!-- 标题start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="name" class="col-sm-2 control-label">标题</label>
				<div class="col-sm-8">
				<input type="text" class="form-control"
									id="name" name="name" placeholder="标题">
				</div>
				<div class="col-sm-2"></div>
			</div>
		</div>
		<!-- 标题end -->
		
		<!-- 内容start -->
		<div class="form-group">
			<div class="col-sm-1"></div>
			<div class="col-md-10">
				<div id="summernote">在此输入帖子内容</div>
			</div>
			<div class="col-sm-1"></div>
		</div>
		
 <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });

    $('#summernote').summernote({
    	  lang: 'zh-CN',
    	  //height: 300,                 // set editor height
    	  minHeight: 300,             // set minimum height of editor
    	  maxHeight: null,             // set maximum height of editor
    	  focus: false                  // set focus to editable area after initializing summernote
    	});
    $('#summernote').summernote({  
        height: "500px",  
        callbacks: {  
            onImageUpload: function(files) { //the onImageUpload API  
                img = sendFile(files[0]);  
        }  
    }  
    });  

    function sendFile(file) {  
        data = new FormData();  
        data.append("file", file);  
        console.log(data);  
        $.ajax({  
            data: data,  
            type: "POST",  
            url: "{:U('Test/upload')}",  
            cache: false,  
            contentType: false,  
            processData: false,  
            success: function(url) {  
                  $("#summernote").summernote('insertImage', url, 'image name'); // the insertImage API  
            }  
        });  
    }  
	
	function getCode(){
		var markupStr = $('#summernote').summernote('code');
		document.getElementById("SummernoteCode").value = markupStr;
	}
	function setCode(markupStr){
		//var markupStr = 'hello world';
		$('#summernote').summernote('code', markupStr);
	}
	setCode('${context}');
	
	function readFile(obj) {
		var file = obj.files[0];
		//判断类型是不是图片  
		if(!/image\/\w+/.test(file.type)) {
			alert("请确保文件为图像类型");
			return false;
		}
		//上次修改时间  
		//alert(file.lastModifiedDate); 
			//名称  
		//alert(file.name); 
		//大小 字节  
		var fsize = file.size; 
		//判断文件大小
		if(fsize/1024 >5000){
			alert("上传图片大小不能大于5M");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e) { 
			document.getElementById("sectionImg").value=this.result;
			document.getElementById("sectionImgSrc").src = this.result;
		}
	}

function getFileUpload(){
document.getElementById("contextFile").click();
}
  </script>
  
		<!-- 内容end -->
		
		
		<!-- operation 操作按钮 -->
		
		<div class="form-group">
			<div class="col-md-4">
			</div>
			<div class="col-md-4" >
    		<button type="submit" class="btn btn-primary" type="submit" style="width:60%; margin-right:5%;" onclick="getCode();">发送</button>
    		<a class="btn btn-warning" href="#" role="button" style="width:30%;">返回</a> 
			</div>
			<div class="col-md-4">
			</div>
		</div>
		<!-- ooperation 按钮结束 -->
        
	</form>
	</div>
</article>
</main>

            </div>
        </div>
    </section>
<!-- 页脚 start -->
<#include "/resources/share/common/_friendshiplink.html"/>
<!-- 页脚 end -->
</body>

	<script type="text/javascript">
		$(document).ready(function() {
			/**
			 * 下面是进行插件初始化
			 * 你只需传入相应的键值对
			 * */
			$('#sectionform').bootstrapValidator({
				message : 'This value is not valid',
				feedbackIcons : {/*输入框不同状态，显示图片的样式*/
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {/*验证*/
					name : {
						message : '标题无效',
						validators : {
							notEmpty : {
								message : '标题不能为空'
							},
							stringLength : {
								min : 2,
								max : 30,
								message : '用户名长度在2到30之间'
							},
							threshold : 4, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
							remote : {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
								url : '${contextPath}/common/checkSectionName',//验证地址
								message : '该标题已被使用',//提示消息
								delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
								type : 'POST'//请求方式
							/**自定义提交数据，默认值提交当前input value
							 *  data: function(validator) {
							      return {
							          password: $('[name="passwordNameAttributeInYourForm"]').val(),
							          whatever: $('[name="whateverNameAttributeInYourForm"]').val()
							      };
							   }
							 */
							}
						}
					},
				}
			});
		});
	</script>
	
	
</html>